@import 'nib'

slider
    display inline-block
    position relative
    height 7px
    width 100%
    margin 25px 5px 25px 5px
    vertical-align middle
    span
        white-space nowrap
        position absolute
        display inline-block
        &.base
            width 100%
            height 100%
            padding 0
        &.bar
            width 100%
            height 100%
            z-index 0
            border-radius 1em/1em
            background linear-gradient(top, lighten(gray, 50%), lighten(gray, 10%))
            box-shadow inset 2px 2px 5px
            &.selection
                width 0%
                z-index 1
                border-radius none
                background linear-gradient(top, darken(#31BFFF, 10%), darken(#31BFFF, 20%))
                box-shadow none
        &.pointer
            cursor pointer
            width 20px
            height 20px
            top -8px
            background-color white
            border 1px solid black
            z-index 2
            border-radius 1em/1em
            &:after
                content ''
                background-color gray
                width 8px
                height 8px
                position absolute
                top 6px
                left 6px
                border-radius 1em/1em
            &:hover:after
                background-color black
            &.active:after
                background-color red
        &.bubble
            cursor default
            top -22px
            padding 1px 3px 1px 3px
            font-size 0.7em
            font-family sans-serif
            &.selection
                top 15px
            &.limit
                color gray
